Vain CSS:llä toteutetut harmonikat: Yksittäisen osion näyttävien widgetien luominen parannetun käyttökokemuksen saavuttamiseksi

Harmonikat ovat modernin verkkosuunnittelun peruspilareita, jotka tarjoavat siistin ja tehokkaan tavan esittää suuria tietomääriä helposti omaksuttavassa muodossa. Ne ovat erityisen hyödyllisiä UKK-osioissa, tuotekuvauksissa ja navigointivalikoissa. Tässä artikkelissa syvennytään vain CSS:llä toteutettujen harmonikkojen luomiseen, joissa vain yksi osio voi olla auki kerrallaan. Tämä lähestymistapa parantaa käyttökokemusta estämällä sisältötulvaa ja edistämällä kohdennettua selaamista.

Vain CSS:llä toteutettujen harmonikkojen etujen ymmärtäminen

Perinteiset JavaScript-pohjaiset harmonikat vaativat usein tilan hallintaa ja tapahtumien käsittelyä, mikä voi lisätä koodin monimutkaisuutta. Vain CSS:llä toteutetut harmonikat sen sijaan hyödyntävät CSS-valitsimien ja `:checked`-pseudoluokan voimaa saavuttaakseen halutun toiminnallisuuden ilman JavaScriptiä. Tämä johtaa:

• Parantunut suorituskyky: JavaScriptin poistaminen vähentää sivun latausaikaa ja parantaa yleistä suorituskykyä.
• Parannettu saavutettavuus: Vain CSS:llä toteutetut harmonikat voidaan tehdä helposti saavutettaviksi käyttämällä asianmukaista HTML-semantiikkaa ja ARIA-attribuutteja.
• Yksinkertaistettu ylläpito: Vähemmän koodia tarkoittaa helpompaa ylläpitoa ja virheenkorjausta.
• Parempi hakukoneoptimointi (SEO): Puhdas HTML ja CSS voivat parantaa hakukoneoptimointia.

Rakennuspalikat: HTML-rakenne

Vain CSS:llä toteutetun harmonikkamme perusta on hyvin jäsennelty HTML-merkkaus. Käytämme seuraavia elementtejä:

• <input type="radio">: Radio-painikkeita käytetään varmistamaan, että vain yksi osio on auki kerrallaan. name-attribuutti on ratkaisevan tärkeä radio-painikkeiden ryhmittelyssä.
• <label>: Label-elementit liitetään radio-painikkeisiin ja toimivat harmonikan otsikoina.
• <div>: Säiliö, joka sisältää harmonikan sisällön.

Tässä on perus-HTML-rakenne:

<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Section 1 Title</label>
  <div class="accordion-content">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Section 2 Title</label>
  <div class="accordion-content">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Section 3 Title</label>
  <div class="accordion-content">
    <p>Content for Section 3.</p>
  </div>
</div>

Selitys:

• accordion-container-luokkaa käytetään koko harmonikkarakenteen muotoiluun.
• Jokainen harmonikkaosio koostuu input-elementistä (radio-painike), label-elementistä ja sisällön sisältävästä div-elementistä.
• Radio-painikkeiden name-attribuutti on asetettu arvoon "accordion" niiden ryhmittämiseksi, mikä varmistaa, että vain yksi voi olla valittuna kerrallaan.
• label-elementin for-attribuutti vastaa vastaavan input-elementin id-tunnistetta, yhdistäen label-elementin radio-painikkeeseen.

Harmonikan muotoilu CSS:llä

Nyt lisätään CSS harmonikan muotoilemiseksi ja yksittäisen avoimen osion toiminnallisuuden toteuttamiseksi.

.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Piilota sisältö aluksi */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Näytä sisältö, kun radio-painike on valittu */
}

Selitys:

• .accordion-container: Muotoilee säiliön reunuksella ja marginaalilla.
• input[type="radio"]: Piilottaa radio-painikkeet, koska haluamme näyttää vain label-elementit.
• label: Muotoilee label-elementit näyttämään harmonikan otsikoilta.
• .accordion-content: Piilottaa sisällön aluksi käyttämällä display: none.
• input[type="radio"]:checked + label: Muotoilee label-elementin, kun vastaava radio-painike on valittu.
• input[type="radio"]:checked + label + .accordion-content: Tämä on avain yksittäisen avoimen osion toiminnallisuuteen. Se käyttää viereisen sisaruksen valitsinta (+) kohdistaakseen accordion-content-elementin, joka seuraa välittömästi valitun radio-painikkeen label-elementtiä, ja asettaa sen display-ominaisuuden arvoon block, tehden siitä näkyvän.

Saavutettavuuden parantaminen ARIA-attribuuteilla

Varmistaaksemme, että harmonikkamme on saavutettava vammaisille käyttäjille, meidän on lisättävä ARIA-attribuutteja. ARIA (Accessible Rich Internet Applications) -attribuutit tarjoavat semanttista tietoa aputeknologioille, kuten ruudunlukijoille.

Näin voimme parantaa saavutettavuutta:

<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">Section 1 Title</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">Section 2 Title</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">Section 3 Title</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>Content for Section 3.</p>
  </div>
</div>

Selitys:

• role="presentation" säiliössä piilottaa säiliön semanttisen merkityksen, jolloin sisäkkäiset ARIA-roolit voivat välittää rakenteen oikein.
• aria-controls: Ilmaisee elementin, jota nykyinen elementti hallitsee (tässä tapauksessa sisältöosio).
• aria-expanded: Ilmaisee, onko hallittu elementti tällä hetkellä laajennettu vai pienennetty. Vaikka emme muuta tätä dynaamisesti JavaScriptillä, on hyvä käytäntö sisällyttää se, ja monimutkaisempi esimerkki voisi käyttää JavaScriptiä sen arvon vaihtamiseen. Alkuarvoksi on asetettu false.
• role="region": Tunnistaa sisältöosion erilliseksi alueeksi sivulla.
• aria-labelledby: Tunnistaa label-elementin, joka kuvaa sisältöosiota.

Tärkeitä huomioita saavutettavuudesta:

• Näppäimistöllä navigointi: Varmista, että käyttäjät voivat navigoida harmonikkaosioiden läpi näppäimistöllä (esim. Sarkain-näppäimellä).
• Ruudunlukijayhteensopivuus: Testaa harmonikka ruudunlukijalla varmistaaksesi, että sisältö ilmoitetaan oikein.
• Värikontrasti: Varmista riittävä värikontrasti tekstin ja taustan välillä näkövammaisille käyttäjille.

Mukauttaminen ja parannukset

Perusmuotoista, vain CSS:llä toteutettua harmonikkaa voidaan edelleen mukauttaa ja parantaa vastaamaan erityisiä suunnitteluvaatimuksia.

Siirtymien lisääminen

Luodaksemme sulavamman käyttökokemuksen voimme lisätä CSS-siirtymiä harmonikan sisältöön.

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Lisää siirtymä */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Aseta enimmäiskorkeus siirtymää varten */
}

Selitys:

• Lisäsimme transition-ominaisuuden .accordion-content-elementtiin animoidaksemme max-height-ominaisuutta.
• Asetimme alkuperäisen max-height-arvon nollaan piilottaaksemme sisällön.
• Kun radio-painike on valittu, asetamme max-height-arvon riittävän suureksi (esim. 500px), jotta sisältö voi laajentua sulavasti. overflow: hidden estää sisällön ylivuotamisen siirtymän aikana, jos todellinen sisällön korkeus on alle 500px.

Muotoilu kuvakkeilla

Kuvakkeiden lisääminen harmonikan otsikoihin voi parantaa visuaalista ilmettä ja käyttäjän ymmärrystä. Voit käyttää tähän tarkoitukseen CSS-pseudo-elementtejä tai fonttikuvakkeita.

CSS-pseudo-elementtien käyttö:

label::after {
  content: '+'; /* Alkuperäinen kuvake */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Vaihda kuvake, kun osio on laajennettu */
}

Fonttikuvakkeiden käyttö (esim. Font Awesome):

1. Sisällytä Font Awesome CSS HTML-tiedostoosi: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
2. Käytä asianmukaisia Font Awesome -luokkia label-elementeissäsi:

<label for="section1">Section 1 Title <i class="fas fa-plus"></i></label>

Käytä sitten CSS:ää kuvakkeen vaihtamiseen, kun osio on laajennettu:

input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* lisää miinus-kuvake */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus unicode */
    float:right;
}

Responsiivisen suunnittelun huomioita

Varmista, että harmonikkasi toimii hyvin eri näyttöko'oilla käyttämällä responsiivisen suunnittelun tekniikoita. Voit käyttää mediakyselyitä säätääksesi harmonikan muotoilua näytön leveyden perusteella.

Esimerkki:

@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Säädä leveys pienemmille näytöille */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Säädä fonttikokoa */
  }
}

Edistyneet tekniikat

Vaikka perusmuotoinen, vain CSS:llä toteutettu harmonikka tarjoaa vankan perustan, on olemassa edistyneitä tekniikoita, jotka voivat edelleen parantaa sen toiminnallisuutta ja käyttökokemusta.

Tilan säilyttäminen Local Storagella

Voit käyttää JavaScriptiä (vaikka tämä kumoaa puhtaan CSS-lähestymistavan) ja local storagea muistaaksesi harmonikan tilan, jotta kun käyttäjä palaa sivulle, aiemmin avatut osiot ovat edelleen auki.

Dynaaminen sisällön lataus

Harmonikoille, joissa on suuria määriä sisältöä, voit ladata sisällön dynaamisesti AJAX-tekniikalla. Tämä voi parantaa sivun alkuperäistä latausaikaa ja vähentää kaistanleveyden käyttöä.

Yleisten ongelmien vianmääritys

Tässä on joitakin yleisiä ongelmia, joita saatat kohdata toteuttaessasi vain CSS:llä tehtyjä harmonikkoja, ja kuinka ratkaista ne:

• Harmonikka ei toimi:
  • Varmista, että radio-painikkeiden name-attribuutti on sama kaikissa osioissa.
  • Tarkista, että label-elementin for-attribuutti vastaa vastaavan input-elementin id-tunnistetta.
  • Tarkista CSS-valitsimissasi mahdolliset kirjoitusvirheet tai virheet.
• Sisältö ei piiloudu aluksi:
  • Varmista, että display: none -tyyli on sovellettu .accordion-content-luokkaan.
• Siirtymät eivät toimi:
  • Tarkista, että transition-ominaisuus on sovellettu oikeaan elementtiin (.accordion-content).
  • Varmista, että max-height on aluksi 0 ja riittävän suuri arvo, kun radio-painike on valittu.
• Saavutettavuusongelmat:
  • Käytä ruudunlukijaa testataksesi harmonikkaa ja tunnistaaksesi mahdolliset saavutettavuusongelmat.
  • Varmista, että ARIA-attribuutit on toteutettu oikein.

Esimerkkejä todellisesta elämästä

Vain CSS:llä toteutettuja harmonikkoja voidaan käyttää monissa todellisen maailman tilanteissa:

• UKK-sivut: Usein kysyttyjen kysymysten esittäminen tiiviisti ja järjestelmällisesti.

  Esimerkki: Yliopiston verkkosivusto, joka käyttää harmonikkaa näyttääkseen UKK-osion kansainvälisten opiskelijoiden pääsyvaatimuksista, kattaen aiheita kuten viisumivaatimukset, lukukausimaksut eri valuutoissa ja majoitusvaihtoehdot.

• Tuotekuvaukset: Tuotetietojen, teknisten eritelmien ja arvostelujen näyttäminen.

  Esimerkki: Verkkokauppasivusto, joka käyttää harmonikkaa näyttääkseen tuotteen eri puolia, kuten tekniset tiedot (jännite, mitat), materiaalikoostumus ja alkuperämaa globaalille yleisölle.

• Navigointivalikot: Laajennettavien valikoiden luominen verkkosivustoille, joilla on monimutkaiset navigointirakenteet.

  Esimerkki: Hallituksen verkkosivusto, jolla on monimutkainen organisaatiorakenne, käyttää harmonikkoja osastojen ja palveluiden erittelyyn eri taustoista tuleville kansalaisille, varmistaen että sisältö on helposti saatavilla kielestä tai hallituksen tuntemuksesta riippumatta.

• Lomakkeet: Pitkien lomakkeiden jakaminen hallittaviin osioihin.

  Esimerkki: Kansainvälisen apurahaohjelman verkkohakemuslomake, joka käyttää harmonikkoja erottelemaan osioita, kuten henkilötiedot, akateeminen historia ja taloudelliset tiedot, parantaen eri maista ja erilaisista koulutusjärjestelmistä tulevien hakijoiden käyttökokemusta.

Yhteenveto

Vain CSS:llä toteutetut harmonikat, joissa vain yksi osio on auki kerrallaan, tarjoavat tehokkaan ja vaikuttavan tavan parantaa käyttökokemusta ja saavutettavuutta verkkosivustollasi. Hyödyntämällä CSS-valitsimien ja ARIA-attribuuttien voimaa voit luoda interaktiivisia elementtejä, jotka ovat suorituskykyisiä, ylläpidettäviä ja saavutettavia laajalle käyttäjäkunnalle. Rakennatpa sitten yksinkertaista UKK-sivua tai monimutkaista verkkosovellusta, vain CSS:llä toteutetut harmonikat voivat auttaa sinua esittämään tietoa selkeällä ja mukaansatempaavalla tavalla, mikä edistää parempaa yleistä käyttökokemusta maailmanlaajuiselle yleisölle.

Lisäoppimateriaalit

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
• ARIA Authoring Practices Guide (APG): https://www.w3.org/WAI/ARIA/apg/
• WebAIM: https://webaim.org/